<template>
	<van-popup v-model="visible" get-container="body" closeable>
		<div class="wrap">
			<i class="iconfont icon-taobao"></i>
			<p>
				购物领取优惠<br />
				需要授权淘宝登录哦
			</p>
			<a @click="authorized">一键授权登录</a>
		</div>
	</van-popup>
</template>

<script>
import { Popup } from 'vant';
export default {
	name: 'AuthorizeDig',
	components: {
		'van-popup': Popup
	},
	data() {
		return {
			visible: false,
			backUrl: null,
			param: null,
		};
	},
	methods: {
		open(backUrl, param) {
			this.visible = true;
			this.backUrl = backUrl;
			this.param = param;
		},
		close() {
			this.visible = false;
		},
		authorized() {
			let params = {
				backUrl: this.backUrl,
				param: this.param,
			};
			this.$service.shopping.taobao.getlink(params).then(res => {
				window.location.href = res;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.van-popup {
	border-radius: 16px;
	margin-top: -50px;
	.wrap {
		width: 480px;
		height: 444px;
		@include flexBox(space-around, center, column);
		i {
			font-size: 100px;
			color: #fe4a22;
			background-image: -webkit-gradient(linear, left 10, right 0, from(rgba(254, 74, 34, 1)), to(rgba(255, 168, 7, 1)));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		p {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin-top: -20px;
		}
		a {
			width: 366px;
			line-height: 72px;
			font-size: 32px;
			text-align: center;
			border-radius: 50px;
			color: $color-white;
			margin-bottom: 34px;
			box-shadow: 0 6px 12px rgba(247, 1, 20, 0.3);
			background: linear-gradient(225deg, #ff513f, #ff8444);
			transition: 0.5s;
			&:hover,
			&:focus {
				opacity: 0.8;
			}
		}
	}
}
</style>
